<template>
  <div id="clear_and_remove" style="width:100%;height:100%;"></div>
</template>

<script>
import {gettrash} from 'config/api';
export default {
  data () {
    return {
      //  清运作业统计
      clear_and_remove_obj: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['总数', '今日收运数'] //  标识
        },
        grid: {
          top: '12%',
          left: '6%',
          right: '10%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: []  //    y坐标
        },
        series: [{
          name: '总数', //  表示数量的项，与 y坐标
          type: 'bar',
          data: [],
          itemStyle: {
            normal: {
              label: {
                show: true,   //  是否展示
                formatter: "{c}辆",
                position: 'right',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '12',
                  fontFamily: '微软雅黑'
                }
              }
            },
            subtextStyle: {
              color: '#000'  // 副标题文字颜色
            }
          }
        },
        {
          name: '今日收运数',  //  表示数量的项，与 y坐标
          type: 'bar',
          data: [],
          itemStyle: {
            normal: {
              label: {
                show: true,   //  是否展示
                formatter: "{c}辆",
                position: 'right',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '12',
                  fontFamily: '微软雅黑'
                }
              }
            },
            subtextStyle: {
              color: '#000'  // 副标题文字颜色
            }
          }
        }
        ]
      }
    };
  },
  mounted () {
    this.clearAndRemove();  //  清运作业
  },
  methods: {
    //  清运作业
    clearAndRemove () {
      gettrash().then((res) => {
        let datas = res.data.data;
        for (var key in datas) {
          if (datas.hasOwnProperty(key)) {
            var element = datas[key];
            this.clear_and_remove_obj.yAxis.data.push(element.type);
            this.clear_and_remove_obj.series[0].data.push(element.cnt);
            this.clear_and_remove_obj.series[1].data.push(element.clearedCnt);
          }
        }
        let myChart = echarts.init(document.getElementById("clear_and_remove"), 'dark'); //  获取Canvas
        myChart.setOption(this.clear_and_remove_obj); //  插入数据
        //  Canvas自适应
        window.addEventListener('resize', function () {
          myChart.resize();
        });
      });
    }
  }
};
</script>
